<template>
  <div class="ma-content-block justify-between p-4">
    <!-- 时间刷选 -->
    <div class="flex justify-between home-page-title" style="margin-bottom:3%;">
      <div class="ma-content-block rounded-sm flex justify-between w-full ">
        <div><p>{{ day }}</p></div>
        <div class="datetime ml-5 flex">
          <span
            v-for="(item, index) in tags"
            :key="index"
            @click="changeTime(index)"
            :class="{ active: index == currentTag }"
          >
            {{ item }}
          </span>
          <a-range-picker
            style="width: 268px"
            v-model="rangeValue"
            @change="onChange"
          >
            <span
              @click="changeTime(tags.length)"
              :class="{ active: currentTag == tags.length }"
            >
              自定义
            </span>
          </a-range-picker>
        </div>
      </div>
    </div>


    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef" >
      <template #dept_id="{ record }">
        <!-- 对标题加上 tag -->
        <div>{{ record.dept_name }}</div>
      </template>
      <template #money="{ record }">
        <!-- 对标题加上 tag -->
        <div>￥{{ record.money }}</div>
      </template>
    </ma-crud>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
import financialMoneyDate from '@/api/financial/financialMoneyDate'
import { Message } from '@arco-design/web-vue'
import dayjs from "dayjs";
import tool from '@/utils/tool'
import * as common from '@/utils/common'

const crudRef = ref()
// 标签"全部", "今日", "本周","本月"
const tags = ref(["昨日"]);
// 当前标签
const currentTag = ref(0);
// 当前时间
const day = ref()
// 选中的时间
const rangeValue = ref([]);
// 传参
const params = ref({page: 1, pageSize: 10})
const is_one = ref(true)
onMounted(() => {
  day.value = dayjs().format("YYYY年MM月DD日");
});
const onChange = (e) => {
  rangeValue.value = e
  params.value = {page: 1, pageSize: 10,created_at:e}
  crudRef.value.refresh()
};
const numberOperation = (newValue, id, numberName) => {
  financialMoneyDate.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchStatus = (statusValue, id, statusName) => {
  financialMoneyDate.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const changeTime = (index) => {
  currentTag.value = index;
  if(index == 1){
    params.value = {}
  }else if(index == 0){
    params.value = {page: 1, pageSize: 10,type:2}
  }
  crudRef.value.refresh()
};




const options = reactive({
  id: 'flyos_financial_money_date',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: false,
  
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: financialMoneyDate.getList,
  recycleApi: financialMoneyDate.getRecycleList,
  add: {
    show: false,
    api: financialMoneyDate.save,
    auth: ['financial:moneyDate:save']
  },
  edit: {
    show: false,
    api: financialMoneyDate.update,
    auth: ['financial:moneyDate:update']
  },
  delete: {
    show: false,
    api: financialMoneyDate.deletes,
    auth: ['financial:moneyDate:delete'],
    realApi: financialMoneyDate.realDeletes,
    realAuth: ['financial:moneyDate:realDeletes']
  },
  recovery: {
    show: false,
    api: financialMoneyDate.recoverys,
    auth: ['financial:moneyDate:recovery']
  },
  import: {
    show: false,
    url: 'financial/moneyDate/import',
    templateUrl: 'financial/moneyDate/downloadTemplate',
    auth: ['financial:moneyDate:import']
  },
  export: {
    show: true,
    url: 'financial/moneyDate/export',
    auth: ['financial:moneyDate:export']
  },
  beforeRequest: (paramse) => {
    if(currentTag.value == 1){
      paramse.type=''
      paramse.created_at = rangeValue.value
    }else if(currentTag.value == 0){
      paramse.type=2
      paramse.created_at = ''
    }
    if(is_one.value){
      paramse.orderBy  = 'money'
      paramse.orderType   = 'desc'
      is_one.value = false
    }
    // paramse = {
    //   ...params
    // }
    // console.log(paramse)
	},
  resetSearch:(e)=>{
    currentTag.value = 0
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
		title: "客户名称",
		dataIndex: "dept_id",
		align: "center",
		formType: "select",
		width: 200,
		fixed: "left",
		search: true,
		dict: {
			// 远程通用接口请求，新版代码生成都有一个 remote 接口
			remote: "system/dept/remote",
			// 指定组件接收的props
			props: { label: "name", value: "id" },
			// 开启分页
			openPage: false,
			// 远程请求配置项
			remoteOption: {
				// 按用户名排序
				sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
				// 设置查询的字段
				select: ["id", "name"],
				// 设置数据过滤
				filter: {
					type: ["=", 2],
          status: ['=',1]
				},
				// 关联模型
				relations: [],
			},
		},
		
	},
  {
    title: "日期",
    dataIndex: "created_at",
    formType: "date",
    align:'center',
    showTime: false
  },
  {
    title: "余额",
    dataIndex: "money",
    formType: "input",
    align:'center',
    sortable: {
      sortDirections: ['ascend', 'descend'],
      sorter: true,
    },
    search: false
  },
  {
    title: "",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  }
])
</script>
<style scoped lang="less">
	.home-page-title {
		align-items: center !important;
    p {
				font-size: 20px;
				color: #415b73;
				margin-left: 20px;
				font-style: italic;
			}
		img {
			height: 30px;
		}

		.datetime {
			align-items: center;

			

			span {
				width: 64px;
				border-radius: 32px;
				padding: 4px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20px;
				color: #00a0e9;
				border: 1px solid #00a0e9;
                font-size: 14px;
                font-weight: 400;
				cursor: pointer;

				&.active {
					background: #00a0e9;
					color: #fff;
				}
			}
		}
	}
</style>
<script> export default { name: 'financial:moneyDate' } </script>